<template>
	<view>

		<view class="charts-box" :style="ChartsStyle" v-for="(item,index) in chartDataArr" :key="index">
			<qiun-data-charts :type="item.chartType" :canvas2d="canvas2d" :ontouch="true" onzoom
				:opts="chartTypeOpts(item)" :canvas-id="'chart_'+index+'_' + canvasId"
				:chartData="item.chartData"></qiun-data-charts>
		</view>
	</view>
</template>

<script>
	import ChartDataProcessor from './static/chartData.js';
	export default {
		props: {
			canvasId: {
				type: String,
				default: () => {
					const id = Math.random().toString(36).slice(2, 10);
					return 'chart_' + id
				}
			},
			canvas2d: {
				type: Boolean,
				default: true
			},
			chartType: {
				type: String,
				default: 'column'
			},
			chartData: {
				type: Object,
				default: {}
			},
			ChartsStyle: {
				type: [String, Object],
				default: () => {
					return {
						width: '100%',
						height: '300px',
					}
				}
			}
		},
		data() {
			return {
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {},
			};
		},
		computed: {
			chartDataArr() {

				const processor = new ChartDataProcessor();
				processor.getServerData(this.chartData);
				return processor.chartDataArr;
			},
		},
		methods: {
			maxNumBack(Num) {
				let maxNum = 0;
				// 判断数据是否为三位数以上 
				// 数据长度 
				let NumLength = String(String(Num).split('.')[0]).length;
				if (NumLength > 2) {
					let numberStr = Num.toString();
					let resultNum = null;

					// 如果第一位是9，向上进位
					let firstNum = Number(numberStr[0]);
					if (firstNum == 9) {
						// 生成指定数量的0的字符串  
						let zeros = '0'.repeat(NumLength);
						resultNum = 1 + zeros;
					} else {
						// 当第一位不是9
						// 获取第二位数据
						let secondNum = Number(numberStr[1]);
						// 判断第二位数据是否为9
						if (secondNum == 9) {
							// 生成指定数量的0的字符串  
							let zeros = '0'.repeat(NumLength - 1);

							resultNum = numberStr[0] + zeros

						} else { // 第二位数据不是9
							// 生成指定数量的0的字符串  
							let zeros = '0'.repeat(NumLength - 2);
							resultNum = numberStr[0] + String(+numberStr[1] + 1) + zeros;
						};
					};
					maxNum = +resultNum;
				}
				return maxNum;

			},
			chartTypeOpts(chartDataItem) { // 根据type处理opts配置信息

				let type = chartDataItem.chartType;

				let color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					"#ea7ccc"
				];


				let cloneDataOpts = {

					color: color,
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {},
					extra: {}
				}


				if (type == 'bar') {

					cloneDataOpts['padding'] = [15, 40, 15, 20];

					let filterData = chartDataItem.chartData.series.map(item => {
						return item.data[0]['value']
					})

					// 获取最大值进位数据
					let maxNum = this.maxNumBack(Math.max(...filterData));


					cloneDataOpts.xAxis = {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: maxNum
					}

					cloneDataOpts.yAxis = {
						disabled: true,
					}

					cloneDataOpts.extra['bar'] = {
						type: "group",
						width: 30,
						meterBorde: 1,
						meterFillColor: "#FFFFFF",
						activeBgColor: "#000000",
						activeBgOpacity: 0.08,
						linearType: "custom",
						barBorderCircle: true,
						seriesGap: 2,
						categoryGap: 2
					}

				} else if (type == 'column') {
					cloneDataOpts.extra['column'] = {
						type: "group",
						width: 30,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08
					}

					cloneDataOpts['enableScroll'] = true;

					cloneDataOpts.xAxis = {
						disableGrid: true,
						// calibration: true,
						scrollShow: true,
						itemCount: 4,
						labelCount: 6,
						lineHeight: 40,
						fontSize: 12,
						lineHeight: 12
					}

					cloneDataOpts.yAxis = {
						disableGrid: true,
						// calibration: true,
						scrollShow: true,
						itemCount: 2,
						labelCount: 6,
						lineHeight: 40,
						data: [{
							min: 0
						}]
					}

				} else if (type == 'line') {
					let maxNumArr = [];

					chartDataItem.chartData.series.forEach(item => {

						maxNumArr.push(Math.max(...item.data));
					});

					cloneDataOpts['enableScroll'] = true;


					// 获取最大值进位数据
					let maxNum = this.maxNumBack(Math.max(...maxNumArr));
					cloneDataOpts.extra['line'] = {
						type: "curve",
						width: 2,
						activeType: "hollow"
					}

					cloneDataOpts.xAxis = {
						disableGrid: true,
						// calibration: true,
						scrollShow: true,
						itemCount: 4,
						labelCount: 6,
						lineHeight: 40,
						fontSize: 12,
						lineHeight: 12
					}

					cloneDataOpts.yAxis = {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0
						}]
					}

					if (maxNum) {

						// if (maxNum > 3000000 && maxNum < 4000000) {
						// 	maxNum = 4000000
						// } else if (maxNum > 1500000 && maxNum < 2000000) {
						// 	maxNum = 2000000
						// } else if (maxNum > 60000 && maxNum < 100000) {
						// 	maxNum = 100000
						// }


						cloneDataOpts.yAxis.data[0]['max'] = maxNum;
					}

				} else if (type == 'ring') {


					cloneDataOpts = {
						rotate: false,
						rotateLock: false,
						color: color,
						padding: [5, 30, 5, 5],
						dataLabel: true,
						enableScroll: false,
						legend: {
							show: true,
							position: "right",
							lineHeight: 25
						},
						title: {
							name: " ",
							fontSize: 15,
							color: "#666666"
						},
						subtitle: {
							name: " ",
							fontSize: 25,
							color: "#7cb5ec"
						},
						extra: {
							ring: {
								ringWidth: 60,
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: false,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							}
						}
					}
				} else if (type == 'pie') {


					cloneDataOpts = {
						rotate: false,
						rotateLock: false,
						color: color,
						padding: [5, 5, 5, 5],
						dataLabel: true,
						enableScroll: false,
						legend: {
							show: true,
							position: "right",
							lineHeight: 25
						},
						title: {
							name: " ",
						},
						subtitle: {
							name: " ",
						},
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: false,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							},
						}
					}
				}



				return cloneDataOpts;

			},
		}
	}
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 240px;
	}
</style>